<template>
  <div>


  <div class="top">
    <div class="kflexb">
      <div class="kflex" style="padding: 18px 30px;">
        <!-- <div class="kflexcc" @click="gozhibo"  v-if="checkquanxian('W').length > 0 " style="cursor: pointer; padding: 7px 14px; border-radius: 25px; background: #EEF7FF; color: #F1F8FF; font-weight: bold; font-size: 14px; margin-right: 10px;"><img src="../../static/kuanping/zhi.png" style="width: 16px; margin-right: 5px;">直播商城</div>
        <div class="kflexcc" @click="xiaoluohao" style="cursor: pointer; padding: 7px 14px; border-radius: 25px; background: #F1F8FF; color: #0378F1; font-weight: bold; font-size: 14px;">小螺号垂直分销</div> -->
      </div>
      <div class="kflex" style="align-items: center; padding: 13px 0px;">

        <!-- <div style="padding: 7px 14px; border-radius: 25px; background: #F5F5F5; font-size: 14px; margin-right: 36px; cursor: pointer;" @click="goid('/yijianfankui')">意见反馈</div> -->
        <!-- <el-popover placement="bottom" trigger="hover">
            <div style="text-align: center;">
              <div>微信扫码咨询{{moban.platform_name}}客服</div>
              <div><img :src="moban.customer" style="width: 110px;"></div>

              <div>客服在线时间：工作日8:30-17:00</div>
            </div>
            <div slot="reference">
              <div style="margin-right: 36px; text-align: center; cursor: pointer;">
                <div><img src="../../static/kuanping/kefu.png" style="width: 16px; margin-bottom: 5px;"></div>
                <div style="font-size: 14px;">客服</div>
              </div>
            </div>
        </el-popover> -->

        <a style="margin-right: 36px; text-align: center; cursor: pointer;" href="https://apifox.com/apidoc/shared-080982ae-f16a-41e0-8a3f-8491b1bda25c" target="_blank">
          <div><img src="../../static/kuanping/apiwendang.png" style="width: 16px; margin-bottom: 5px;"></div>
          <div style="font-size: 14px;">API文档</div>
        </a>

        <div style="margin-right: 36px; text-align: center; cursor: pointer;" @click="go('/setup/flag')">
          <div><img src="../../static/kuanping/shezhi.png" style="width: 16px; margin-bottom: 5px;"></div>
          <div style="font-size: 14px;">设置</div>
        </div>
        <div style="margin-right: 36px; text-align: center; cursor: pointer;"  >
          <div><img src="../../static/kuanping/bangzhu.png" style="width: 16px; margin-bottom: 5px;"></div>
          <div style="font-size: 14px;">帮助</div>
        </div>
        <!-- <div style="margin-right: 36px; text-align: center; cursor: pointer;"  @click="goopen('shangpinlist')" >
          <div><img src="../../static/kuanping/zhishiku.png" style="width: 16px; margin-bottom: 5px;"></div>
          <div style="font-size: 14px;">知识库</div>
        </div> -->
        <div style="margin-right: 36px; text-align: center; cursor: pointer; position: relative;" @click="go('/xiaoxi/xiaoxi')" v-if="func_C">
          <div><img src="../../static/kuanping/xiaoxi.png" style="width: 16px; margin-bottom: 5px;"></div>
          <div class="jbiao" v-if="xiaoxinum"></div>
          <div style="font-size: 14px;">消息</div>
        </div>

        <el-dropdown trigger="click" style=" margin-right: 36px;" @command="handleCommand">
          <span class="el-dropdown-link">
            <div style="font-size: 14px;">欢迎<span style="color: #025ad0; font-size: 14px; cursor: pointer;"> {{user_name}} </span> <i class="el-icon-arrow-down el-icon--right"></i></div>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">个人中心</el-dropdown-item>
            <el-dropdown-item command="b">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>


        <!-- <div @click="exit" style="cursor: pointer; color:#666; font-size: 14px; padding-right: 36px;">个人中心</div>
        <div @click="exit" style="cursor: pointer; color:#666; font-size: 14px; padding-right: 36px;">退出</div> -->
      </div>
    </div>
    <!-- <div class="top-title">
      <div style="display: flex; align-items: center;">
        <span>欢迎 {{user_name}}</span>
        <span> <router-link to="/personalCenter">个人中心</router-link></span>
        <span @click="exit" style="cursor: pointer; color:#666;">退出</span>
        <span v-if="isneedsm" @click="isshowsm=true" style="color: #EEF7FF;cursor: pointer;">{{namecode}}</span>
      </div>

      <div style="display: flex; align-items: center;">
        <el-popover placement="bottom" trigger="hover">
            <div style="text-align: center;">
              <div>微信扫码咨询{{moban.platform_name}}客服</div>
              <div><img src="../../static/img/kefu2.png"></div>
              <div>提供{{moban.platform_name}}使用帮助及疑难解答</div>
              <div>客服在线时间：工作日8:30-17:00</div>
            </div>
            <div slot="reference"><img src="../../static/img/kefu1.png" >客服中心</div>

        </el-popover>
        <span><router-link to="/setup/flag"><img :src="top1">功能设置</router-link></span>
        <span><router-link target="_blank" to="/help/howtoAlt"><img :src="help">帮助中心</router-link></span>
        <span v-if="shopid == 50481 || shopid == 304676">
          <router-link target="_blank" to="/shangpinlist"><img :src="top3">知识库</router-link>
        </span>
      </div>
    </div> -->

    <!-- <div class="top-center">
      <div class="content" style="display: flex; justify-content: space-between; align-items: center;">
        <div class="top-logo"><img :src="srclogo"></div>
        <div class="top-r" @click="go('/tongzhizhongxin')" v-if="func_C" style="cursor: pointer;">
          <div class="jbiao" v-if="xiaoxinum != 0">{{xiaoxinum}}</div>
          <img src="../../static/img/bell.png" style="width: 23px;" />
        </div>
      </div>
    </div> -->

    <!-- 重要通知 -->
    <el-dialog class="tongzhi" :close-on-click-modal="false" :show-close="false" :visible.sync="tongzhilog"
      width="800px">
      <div style="background: #EEF7FF; color: #fff; text-align: center; padding: 15px 0; font-size: 20px;">公告通知</div>
      <div style="padding: 20px;">

        <div style="font-weight: bold; font-size: 18px;">{{tongzhilist[0].title}}</div>
        <div v-html="tongzhilist[0].content"></div>
        <div style="color: #FF0000;">通知来自供应商:{{tongzhilist[0].name}}</div>

        <div style="margin-top: 20px;">注：此为上游供应商消息框，非敢探号官方发布，如有发现有人假借敢探号名义发送信息可截图联系客服，我们将采取措施。</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="tongzhilist.length != 1" type="danger" @click="yidu(tongzhilist[0].id,1)">我已了解，下一条</el-button>
        <el-button v-if="tongzhilist.length == 1" type="danger" @click="yidu(tongzhilist[0].id,1)">我已了解</el-button>
        <el-button v-if="tongzhilist.length >=2" type="danger" @click="guanbi()">全部关闭</el-button>
        <!-- <el-button v-if="tongzhilist.length > 1" type="danger" @click="yidu2()">全部已读</el-button> -->

        <span v-if="tongzhilist.length != 1" style="font-size: 16px; margin-left: 20px;">共{{tongzhilists.total}}条</span>
      </span>
    </el-dialog>

    <el-dialog class="tongzhi tongzhi2" :close-on-click-modal="false" :show-close="false" :visible.sync="tongzhilog2"
      width="1000px">
      <div style="position: relative; width: 100%; height: 100%;">
        <div style="position: absolute; left: 78px; top: 112px;" class="kflexc">
          <div style="font-size: 20px; color: #fff;">{{tongzhilist2[0].version}}</div>
          <div style="font-size: 14px; margin-left: 20px; color: #fff;">上线时间：{{tongzhilist2[0].online_time}}</div>
        </div>
        <div style="position: absolute; left: 40px; top: 215px; font-size: 15px; color: rgb(51, 51, 51); font-family:MicrosoftYaHei; width: 700px; height: 220px; overflow: auto;" v-html="tongzhilist2[0].content"></div>

        <div class="kflexbc" style="left: 40px; top: 440px; width: 710px; position: absolute;">
          <div>
            <div style="cursor: pointer; color: #515151; " v-if="tongzhilist2[0].file != ''" @click="down(tongzhilist2[0].file)">
              下载附件：<span style="color: rgb(37, 142, 255);">{{tongzhilist2[0].file_name}}</span>
            </div>
          </div>

          <div class="kflexc">
            <el-button v-if="tongzhilist2.length != 1" type="text"
               @click="yidu(tongzhilist2[0].id,1)">我已了解，下一条
            </el-button>
            <el-button v-if="tongzhilist2.length == 1" type="danger" round style="background: rgb(250, 18, 98); color: #fff;"
               @click="yidu(tongzhilist2[0].id,1)">关闭</el-button>
            <span v-if="tongzhilist2.length != 1"
              style="font-size: 16px; margin-left: 20px;">共{{tongzhilists2.total}}条</span>
          </div>
        </div>



      </div>
    </el-dialog>
    <el-dialog
    class="t_gg"
		title=""
		:show-close="false"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		:visible.sync="isshowsm"
		width="800px">
		<div style="background-color: #FF5151;text-align: center;font-size: 20px;padding: 10px 0;color: white;">
				商家店铺实名公告
		</div>
		<div style="padding: 50px;">
			<div style="font-size: 14px;color: #575757;font-weight: bold;margin-bottom: 20px;" >
				尊敬的{{moban.platform_name}}商家：
			</div>
			<div style="font-size: 14px;color: #FF3B3B;margin-bottom: 20px;">
				您的店铺因未实名已停用，请点击"前往实名"按钮（使用主账号操作）实名启用
			</div>
			<div style="font-size: 14px;margin-bottom: 20px;">
				为了更好的维护{{moban.platform_name}}商家共有的诚信营商环境，保障商家基本权益，现推行店铺实名制
			</div>
			<!-- <div style="font-size: 14px;color: #575757;font-weight: bold;margin-bottom: 20px;">
				特别说明：您的实名信息{{moban.platform_name}}将会严密保存，除了国家执法部门根据规程提出相关要求出示之外我们将不会透露给任何第三方。
			</div> -->
			<div style="text-align: right;">
				<el-button type="danger" @click="smfunc">前往实名</el-button>
				<!-- <el-button type="text" @click="notsm">暂时跳过</el-button> -->
			</div>
		</div>


	</el-dialog>

  </div>
  <!-- 固定导航 -->
  <div style="background:#F4F4F4">
    <el-tag
      style="margin-top: 10px;margin-right: 10px;cursor: pointer;"
      v-for="tag in navtags"
      :key="tag.navname"
      closable
      @click="tonav(tag.path)"
      @close="delnav(tag.path)"
      type="danger">
      {{tag.navname}}
    </el-tag>
  </div>
</div>
</template>

<script>
  import bus from '@/assets/bus.js'
  import axios from 'axios'
  export default {
    name: 'top',
    data() {
      return {
        tongzhilog: false,
        tongzhilog2: false,
        tongzhilist: [{
          content: "",
          title: ""
        }],
        tongzhilist2: [{
          content: "",
          title: ""
        }],
        tongzhilists: {
          page: 1,
          pagesize: 1,
          total: 0
        },
        tongzhilists2: {
          page: 1,
          pagesize: 1,
          total: 0
        },
        user_name: "",
        flags: false,
        title: "订单管理平台",
        top1: "./static/img/top1.png",
        top3: "./static/img/top3.png",
        gnurl: "./static/img/gn.png",
        srclogo: "./static/img/gthlogo.png",
        help: "./static/img/help.png",
        shopid: "",
        xiaoxinum: 0,
        func_C: false,
        isshowsm:false,
        isneedsm:false,
        ismaincode:false,
        namecode:'',
        navtags: [],
        shuliang:0
      }
    },

    created() {

      var that = this



      //验证登陆
      // axios.get("/api/auth/me")
      //   .then(function(response) {
      //     if (response && response.data.msg.code == 0) {
      //       bus.$emit('shopid', response.data.data.id)

      //       axios.get('/api/gth/user/shop')
      //       .then(response2 => {
      //         if (response2.data.msg.code == 0) {
      //           // console.log('dddd---ddd')
      //           console.log(response.data.data.id,response2.data.data.shop_id*1)
      //           //判断是否为主账号
      //           if(response.data.data.id==response2.data.data.shop_id*1){
      //             that.ismaincode = true
      //           }else{
      //             that.ismaincode = false
      //           }
      //         } else {
      //           this.$message.error(response2.data.msg.info);
      //         }
      //       })
      //     } else {
      //       if (response && response.data.msg.code == 50401) {
      //         that.$router.push({
      //           path: "/login"
      //         });
      //       }
      //     }
      //   })

      //左上角店铺名
      var shop = JSON.parse(localStorage.getItem('USER'));
      var shop2 = JSON.parse(localStorage.getItem('SHOP'))

      if(shop.id == shop2.shop_id*1){
        this.ismaincode = true
      }else{
        this.ismaincode = false
      }
      bus.$emit('shopid', shop.id)

      // axios.get('/api/gth/user/shop')
      // .then(response2 => {
      //   if (response2.data.msg.code == 0) {
      //     // console.log('dddd---ddd')
      //     console.log(response.data.data.id,response2.data.data.shop_id*1)
      //     //判断是否为主账号
      //     if(shop.id == response2.data.data.shop_id*1){
      //       that.ismaincode = true
      //     }else{
      //       that.ismaincode = false
      //     }
      //   } else {
      //     this.$message.error(response2.data.msg.info);
      //   }


      this.user_name = shop.name
      this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id

      if (this.user_name == '游客') {
        this.exit()
      }

      // this.getnum()
      this.gettongzhi()
      this.gettongzhi2()
      //权限问题
      var user = JSON.parse(localStorage.getItem('USER'));
      this.user_func = user.functions
      for (var i in this.user_func) {
        if (this.user_func[i] != null) {
          var func_number = this.user_func[i].code
          if (func_number.indexOf("O01") >= 0) {
            this.func_C = true
          }
        }
      }

      //获取消息
      axios.get('/api/sys/message/amount')
      	.then(response => {
      		if (response && response.data.msg.code == 0) {
      			this.xiaoxinum = response.data.data
      		} else {
      			if (response && response.data.msg.code == 50401) {
      				that.$router.push({
      					path: "/login"
      				});
      				return false
      			}
      		}
      	})

      //验证是否实名
      axios.get('/api/gth/shop/identify/check')
          .then(response => {
            if (response && response.data.msg.code == 0) {
              // if(response.data.data == null){

              // }
              if(response.data.data == null){
                //提示去实名
                //提示去实名

                this.isneedsm = true
                // console.log('ee')
                // console.log(this.isshowsm)
                if(localStorage.getItem('canshow')==1){
                  this.isshowsm = true
                }

                this.namecode = '店铺未实名'
              }else{
                if(response.data.data.status == -1){
                 //审核中
                 this.namecode = '店铺审核中'
                }
                if(response.data.data.status == -2){
                  //拒绝
                  this.namecode = '审核拒绝'
                }
                if(response.data.data.status == 0){
                  //0正常
                  this.namecode = ''
                }

              }
            }
      })

      //获取账号shopid
      // axios.get('/api/gth/user/shop')
			// 	.then(response => {
			// 		if (response && response.data.msg.code == 0) {
      //       console.log('shop_id')
      //       console.log(response.data.data.shop_id)
			// 		} else {
			// 			this.$message.error(response.data.msg.info);
			// 		}
			// 	})

      //获取固定导航
      this.navtags = JSON.parse(localStorage.getItem('LOCAL_NAV'+this.shopid))



    },
    mounted(){
      var that = this

      // 监听localhostStorage的数据变化，结合utils/tool.js配合使用
      window.addEventListener('setItemEvent', function(e) {
        // const newdata = JSON.parse(e.newValue)

        if(e.key == 'LOCAL_NAV'+that.shopid){
          that.navtags = JSON.parse(e.newValue)
        }

      })
    },
    methods: {
      xiaoluohao:function(){

        axios.get('/api/plan-market/shop/xiaoluohao/domain')
          .then(response => {
            if (response && response.data.msg.code == 0) {
              window.open('http://'+ response.data.data)
            } else {
            	window.open('http://xiaoluohao.vip/')
            }
          })
      },

      golianghao:function(){
        window.open('http://liang.91haoka.cn/web/denglu#reloaded')
      },
      gozhibo:function(){
        var arrstr = document.cookie.split("; ");
        let cookie = ''
        for(var i = 0;i < arrstr.length;i ++){
          var temp = arrstr[i].split("=");
            if(temp[0] == 'laravel_session') {
              cookie = temp[1]
            }
        }
        window.open('https://storep.91haoka.cn/web/zhiboxitong/zhiboxiaoshou?cookie='+cookie)

      },
      gozhibo2:function(){
        window.open('https://91haoka.cn/91haoka_platform_bak/#/login')
      },


      handleCommand(command) {
        if(command == 'a'){
          this.$router.push({
            path:"/personalCenter"
          })
        }
        if(command == 'b'){
          this.exit()

          localStorage.removeItem('USER')
          localStorage.removeItem('SHOP')
        }
      },


      guanbi:function(){
        axios.post('/api/system/notice/close')
          .then(response => {
            if (response && response.data.msg.code == 0) {

              this.tongzhilog = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      down: function(url) {
        const a = document.createElement('a');
        a.setAttribute('download', "");
        a.setAttribute('href', url);
        a.click();
      },
      //获取重要通知
      gettongzhi: function() {
        axios.get('/api/sys/notice/get/notice?type=1&page=' + this.tongzhilists.page + '&page_size=' + this
            .tongzhilists.pagesize)
          .then(response => {
            if (response && response.data.msg.code == 0) {
              this.tongzhilist = response.data.data.data
              this.tongzhilists.total = response.data.data.total
              if (this.tongzhilist.length != 0) {
                this.tongzhilog = true
              } else {
                this.tongzhilist = [{
                  content: "",
                  title: ""
                }]
              }
            } else {
              if(response){
                this.$message.error(response.data.msg.info);
              }
            }
          })
      },
      //获取重要通知
      gettongzhi2: function() {
        axios.get('/api/sys/notice/get/notice?type=3&page=' + this.tongzhilists2.page + '&page_size=' + this
            .tongzhilists2.pagesize)
          .then(response => {
            if (response && response.data.msg.code == 0) {
              this.tongzhilist2 = response.data.data.data
              this.tongzhilists2.total = response.data.data.total
              if (this.tongzhilist2.length != 0) {
                this.tongzhilog2 = true
              } else {
                this.tongzhilist2 = [{
                  content: "",
                  title: ""
                }]
              }
            } else {
              if(response){
                this.$message.error(response.data.msg.info);
              }
            }
          })
      },
      //已读
      yidu: function(id, ff) {
        axios.post('/api/sys/notice/set/read', {
            id: id
          })
          .then(response => {
            if (response && response.data.msg.code == 0) {
              this.tongzhilog = false
              this.tongzhilog2 = false
              this.gettongzhi()
              this.gettongzhi2()
            } else {
              if(response){
                this.$message.error(response.data.msg.info);
              }
            }
          })
      },
      yidu2:function(){
        axios.post('/api/system/notice/all/read')
          .then(response => {
            if (response && response.data.msg.code == 0) {
              this.tongzhilog = false
              this.tongzhilog2 = false
            } else {
              if(response){
                this.$message.error(response.data.msg.info);
              }
            }
          })
      },
      // getnum: function() {
      //   axios.get('/api/sys/notice/unread/num')
      //     .then(res => {
      //       this.xiaoxinum = res.data.data.num
      //     })
      // },
      go: function(url) {
        if(url == '/help/howtoAlt'){
          window.open(window.location.origin + window.location.pathname + '#' + url)
        }else{
          this.$router.push({
            path: url
          })
        }

      },
      //获取未读条数

      //退出
      exit: function() {
        var that = this
        axios.get('/api/auth/logout')
          .then(function() {
            that.$router.push({
              path: "/login"
            });
          })
      },
      //实名跳转
			smfunc(){
        if(this.ismaincode){
				  this.$router.push('/shimingrenzheng')
        }else{
          this.$message.error('请使用主账号操作实名');
        }
			},
      //点击暂时跳过
      notsm(){
        this.isshowsm=false
        ////标记不再展示弹窗
				localStorage.setItem('canshow', 2);
      },

      //点击固定导航
      tonav(path){
        this.$router.push({
          path: path
        });
      },
      //删除固定导航
      delnav(path){
        var nav = JSON.parse(localStorage.getItem('LOCAL_NAV'+this.shopid))
        //删除
        for(var x = 0;x<nav.length;x++){
						if(nav[x].path==path){
							nav.splice(x,1)
						}
				}
        //保存固定导航
				localStorage.setItem('LOCAL_NAV'+this.shopid, JSON.stringify(nav));
				this.$message({
					message: '修改成功',
					type: 'success'
				});
        this.navtags = nav
      }
    }

  }
</script>

<style lang="scss" scoped>
  .top {
    height: 70px;
    background: #fff;
    // .router-link-active {
    //   background: transparent !important;
    //   border-top: 0px #DD2727 solid !important;
    // }
  }
  .el-dropdown-link{
    /deep/ .el-icon--right{ font-weight: bold !important;}
  }
  /deep/ .el-button--primary{ color: #fff !important;}
  .tongzhib {
    position: fixed;
    right: 20px;
    bottom: 20px;

    .flex {
      display: flex;
    }

    .tongzhili {
      width: 300px;
      background: #FFFFFF;
      margin-bottom: 10px;
      font-size: 14px;

      img {
        width: 50px;
        margin-right: 10px;
        display: block;
      }
    }
  }

  .tongzhi2 {
    /deep/ .el-dialog {
      width: 800px !important;
      height: 500px; box-shadow: none;
      background: url('../../static/kuanping/tzbj.png') no-repeat center;
    }
    /deep/ .el-dialog__body{
      width: 800px;
      height: 500px;
    }
  }

  .tongzhi {
    /deep/ .el-dialog__body {
      padding: 0 0px;
    }

    /deep/ .el-dialog__header {
      padding: 0;
    }

    img{ max-width: 100%;}
  }

  .top-r {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    position: relative;
    background: #fff;
    border: 2px #EAEAEA solid;
    border-radius: 21px;
  }

  .jbiao {
    position: absolute;
    right:0px;
    top: 0px;
    background: #FF5353;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    text-align: center;
    line-height: 10px;
    font-size: 14px;
    color: #fff;
  }

  .where {
    background: #F9FAFC;
    padding: 10px 20px;
    font-size: 14px;
    border: 1px #C4D5E0 solid;
    color: #707070;

    a {
      color: #707070
    }

    a:hover {
      color: #ee3f4d
    }
  }




  .top {
    .top-logo {
      font-size: 28px;
      color: #2974FF;

      img {
        position: relative;
        top: 13px;
      }
    }

    .top-center {
      background: #fff;
      margin-bottom: 16px;
      box-shadow: 0px 0px 5px #ddd;
      line-height: 80px
    }

    .content {
      width: 1366px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between
    }

    .top-title {
      width: 1366px;
      margin: 0px auto;
      color: #666;
      line-height: 27px;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
    }

    .top-title span {
      margin: 0 10px;
      color: #666;

      a {
        color: #666;
      }

      img {
        position: relative;
        width: 15px;
        margin-right: 5px;
        top: 1px;
      }
    }

    .comeon {
      position: fixed;
      right: 0;
      bottom: 0;
      width: 200px;
      box-shadow: 0px 0px 2px #d0dfe6;
      background: #d0dfe6;
      z-index: 9999;
      font-size: 14px;
      color: #8076a3;
      line-height: 20px;
      text-align: center;
      max-height: 120px;

      &>div {
        padding: 10px 0;
      }

      .hide {
        background: #F9FAFC;
        color: #666;
        cursor: pointer;
      }
    }
  }

  .color1 {
    width: 60px;
    height: 24px;
    margin: 5px 0;
    background: #e4dfd7;
  }

  .color1s {
    float: right;
    color: #8492a6;
    font-size: 13px
  }

  .color2 {
    width: 60px;
    height: 24px;
    margin: 5px 0;
    background: #ee3f4d;
  }

  .color2s {
    float: right;
    color: #8492a6;
    font-size: 13px
  }

  .color3 {
    width: 60px;
    height: 24px;
    margin: 5px 0;
    background: #ebb10d;
  }

  .color3s {
    float: right;
    color: #8492a6;
    font-size: 13px
  }

  .color4 {
    width: 60px;
    height: 24px;
    margin: 5px 0;
    background: #229453;
  }

  .color4s {
    float: right;
    color: #8492a6;
    font-size: 13px
  }

  .color5 {
    width: 60px;
    height: 24px;
    margin: 5px 0;
    background: #2775b6;
  }

  .color5s {
    float: right;
    color: #8492a6;
    font-size: 13px
  }

  .color6 {
    width: 60px;
    height: 24px;
    margin: 5px 0;
    background: #8076a3;
  }

  .color6s {
    float: right;
    color: #8492a6;
    font-size: 13px
  }
</style>
